<template>
  <div class="songerDetails">
    <el-row>
      <el-col :span="18">
        <div class="songerInfo">
          <h1 v-if="songerDetails">{{songerDetails.artist.name}}</h1>
          <div class="songerImg">
            <img :src="songerDetails.artist.cover" :alt="songerDetails.artist.name" v-if="songerDetails">
            <div class="operation">
              <el-button v-if="songerDetails.showPriMsg" @click="toUserDetails(songerDetails.user.userId)"><i class="el-icon-user"></i>个人主页</el-button>
              <el-button v-if="!isFollow" @click="followSonger(songerDetails.artist.id)"><i class="el-icon-folder-add"></i>收藏</el-button>
              <el-button v-if="isFollow" @click="followSonger(songerDetails.artist.id)">取消收藏</el-button>
            </div>
          </div>
          <el-tabs v-model="activeName" @tab-click="handleClick(activeName)">
            <el-tab-pane label="热门作品" name="song">
              <table cellpadding="0" cellspacing="0" class="songListDetails3" style="table-layout: fixed;">
                <tr v-for="(item,i) in songerSong" :key="i" :class="(i+1)%2==0?bgcolor.color2:bgcolor.color1">
                  <td class="ranking">{{i+1}}</td>
                  <td class="play">
                    <i class="el-icon-video-play" @click="getSongUrl(item.id)"></i>
                  </td>
                  <td class="name">
                    <i class="songName" @click="getSongUrl(item.id)">{{item.name}}</i>&nbsp;
                    <i v-if="item.mv != 0" id="mvicon" class="el-icon-video-camera" @click="toMVDetails(item.mv)"></i>
                  </td>
                  <td class="songTime">{{formatDateTime(item.dt)}}</td>
                  <td class="album">{{item.al.name}}</td>
                </tr>
              </table>
            </el-tab-pane>

            <el-tab-pane label="所有专辑" name="album">
              <el-row :gutter="15" type="flex" class="myrow">
                <el-col :span="6" v-for="(item,i) in songerAlbum" :key="i">
                  <img :src="item.picUrl" :alt="item.name" class="albumImg">
                  <div class="listName">{{item.name}}</div>
                  <div class="pbCount">{{formatDate(item.publishTime)}}</div>
                </el-col>
              </el-row>
              <el-pagination :page-size="12" :pager-count="7" layout="prev, pager, next" :total="300" :current-page="currentPage" @current-change="handleAlbumChange">
              </el-pagination>
            </el-tab-pane>

            <el-tab-pane label="相关MV" name="mv">
              <el-row :gutter="20" type="flex" style="flex-wrap: wrap">
                <el-col :span="6" v-for="(item,i) in songerMV" :key="i">
                  <div class="coverPic" @click="toMVDetails(item.id)"><img :src="item.imgurl" :alt="item.name"></div>
                  <div class="MvsName" @click="toMVDetails(item.id)">{{item.name}}</div>
                </el-col>
              </el-row>
              <el-pagination :page-size="12" :pager-count="7" layout="prev, pager, next" :total="300" :current-page="currentPage" @current-change="handleMVChange">
              </el-pagination>
            </el-tab-pane>

            <el-tab-pane label="艺人介绍" name="desc">
              <h4 v-if="songerDetails">{{songerDetails.artist.name}}简介</h4>
              <p class="txt">{{songerDesc.briefDesc}}</p>
              <div v-for="(item,i) in songerDesc.introduction" :key="i">
                <h4>{{item.ti}}</h4>
                <p class="txt">{{item.txt}}</p>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="hotSonger">
          <h5>热门歌手</h5>
          <el-row :gutter="15" type="flex" style="flex-wrap: wrap">
            <el-col :span="8" v-for="(item,i) in hotSongers" :key="i">
              <div class="hotSongerImg" @click="toSongerDetails(item.id)"><img :src="item.picUrl" :alt="item.name"></div>
              <div class="hotSongerName" @click="toSongerDetails(item.id)">{{item.name}}</div>
            </el-col>
          </el-row>
          <h5>相似歌手</h5>
          <el-row :gutter="15" type="flex" style="flex-wrap: wrap">
            <el-col :span="8" v-for="(item,i) in simiSongers" :key="i">
              <div class="hotSongerImg" @click="toSongerDetails(item.id)"><img :src="item.picUrl" :alt="item.name"></div>
              <div class="hotSongerName" @click="toSongerDetails(item.id)">{{item.name}}</div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getSongerSong, getSongerMV, getSongerAlbum, getSongerDesc, getSongerDetails, getHotSonger, getSimiSonger } from '../../../network/home'
import { getSongUrl } from "../../../network/search"
import { getUserFollowSonger, followSonger } from "../../../network/user";

export default {
  name: "SongerDetails",
  data() {
    return {
      songerSong: [],
      songerDetails: "",
      songerAlbum: [],
      songerMV: [],
      songerDesc: "",
      hotSongers: [],
      simiSongers: [],
      activeName: 'song',
      //添加背景样式
      bgcolor: { color1: "white", color2: "grey" },
      //默认显示在第几页
      currentPage: 1,
      isFollow: "",
    }
  },
  created() {
    this.getSongerSong(this.$route.params.id);
    this.getSongerDetails(this.$route.params.id);
    this.getHotSonger(0);
    this.getSimiSonger(this.$route.params.id);
  },
  methods: {
    getSongerSong(id) {
      getSongerSong(id).then(res => {
        //console.log(res.data);
        this.songerSong = res.data.hotSongs;
      })
    },
    getSongerDetails(id) {
      getSongerDetails(id).then(res => {
        //console.log(res.data.data);
        this.songerDetails = res.data.data;
        this.getUserFollowSonger(res.data.data.artist.id);
      })
    },
    getSongerAlbum(id, offset) {
      getSongerAlbum(id, offset).then(res => {
        //console.log(res);
        this.songerAlbum = res.data.hotAlbums;
      })
    },
    getSongerMV(id, offset) {
      getSongerMV(id, offset).then(res => {
        //console.log(res);
        this.songerMV = res.data.mvs;
      })
    },
    getSongerDesc(id) {
      getSongerDesc(id).then(res => {
        //console.log(res.data);
        this.songerDesc = res.data;
      })
    },
    getHotSonger(offset) {
      getHotSonger(offset).then(res => {
        //console.log(res.data);
        this.hotSongers = res.data.artists.slice(0, 6);
      })
    },
    getSimiSonger(id) {
      getSimiSonger(id).then(res => {
        //console.log(res.data);
        this.simiSongers = res.data.artists.slice(0, 6);
      })
    },
    getUserFollowSonger(songerId) {
      getUserFollowSonger(localStorage.getItem("username"), songerId).then(res => {
        this.isFollow = res.data;
      })
    },
    followSonger(songerId) {
      followSonger(localStorage.getItem("username"), songerId).then(res => {
        this.isFollow = res.data;
      });
    },
    handleClick(activeName) {
      //console.log(activeName);
      switch (activeName) {
        case "song":
          this.getSongerSong(this.$route.params.id);
          break;
        case "album":
          this.getSongerAlbum(this.$route.params.id, 0);
          break;
        case "mv":
          this.getSongerMV(this.$route.params.id, 0);
          break;
        case "desc":
          this.getSongerDesc(this.$route.params.id);
          break;
      }
    },
    getSongUrl(id) {
      getSongUrl(id).then(res => {
        localStorage.setItem("songUrl", res.data.data[0].url);
        //刷新页面 input传入过去 其中内容改了 但是页面还是原来的 需要刷新显示
        location.reload();
      })
    },
    //跳转到播放mv界面
    toMVDetails(id) {
      this.$router.push({ name: "MVDetail", params: { id: id } });
    },
    //获取当前页数 val为当前在第几页
    handleAlbumChange(val) {
      this.currentPage = val;
      this.getSongerAlbum(this.$route.params.id, (val - 1) * 12);
    },
    handleMVChange(val) {
      this.currentPage = val;
      this.getSongerMV(this.$route.params.id, (val - 1) * 12);
    },
    toSongerDetails(id) {
      this.$router.push({ name: "SongerDetails", params: { id: id } });
      location.reload();
    },
    toUserDetails(id) {
      this.$router.push({ name: "UserDetails", params: { id: id } });
    },
    formatDateTime(mss) {
      let minutes = Math.floor((mss % (1000 * 60 * 60)) / (1000 * 60));
      let seconds = Math.round((mss % (1000 * 60)) / 1000);

      if (minutes < 10) {
        if (seconds < 10) {
          return "0" + minutes + ":0" + seconds;
        } else {
          return "0" + minutes + ":" + seconds;
        }
      } else {
        if (seconds < 10) {
          return minutes + ":0" + seconds;
        } else {
          return minutes + ":" + seconds;
        }
      }
    },
    formatDate(time) {
      let date = new Date(time);
      let y = date.getFullYear();// 年
      let MM = date.getMonth() + 1;// 月
      MM = MM < 10 ? ('0' + MM) : MM;
      let d = date.getDate();// 日
      d = d < 10 ? ('0' + d) : d;
      return y + '-' + MM + '-' + d;
    },
  }
}
</script>

<style scoped>
.songerDetails {
  width: 75%;
  height: 100%;
  margin: 0 auto;
  border-left: RGB(211, 211, 211) 1px solid;
  border-right: RGB(211, 211, 211) 1px solid;
}
.songerInfo {
  border-right: RGB(211, 211, 211) 1px solid;
  padding: 0 30px;
}
.songerInfo img {
  width: 100%;
  height: 70%;
}
.songerImg {
  position: relative;
}
.operation {
  right: 1rem;
  bottom: 1rem;
  position: absolute;
}
.songListDetails3 {
  width: 100%;
  height: 100%;
  table-layout: fixed;
}
.songListDetails3 tr:hover {
  background: RGB(245, 247, 250);
}
.songListTh td {
  padding: 5px;
}
.ranking {
  text-align: center;
  line-height: 60px;
  width: 12%;
}
.play {
  width: 2%;
}
.name {
  padding: 10px;
  width: 45%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.songName {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.songTime {
  width: 15%;
  padding: 10px;
}
.album {
  padding: 10px;
  width: 20%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
#mvicon:hover {
  background: RGB(64, 158, 255);
}
.myrow {
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
}
.albumImg {
  width: 100%;
  height: 100%;
}
.listName {
  font-size: 0.9rem;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}
.listName:hover {
  color: RGB(64, 158, 255);
}
.pbCount {
  font-size: 0.7rem;
  width: 100%;
  color: RGB(153, 153, 153);
  margin-bottom: 2rem;
}
.coverPic img {
  width: 100%;
  height: 169px;
}
.MvsName {
  font-size: 0.9rem;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  margin-bottom: 2rem;
}
.MvsName:hover {
  color: RGB(64, 158, 255);
}
.txt {
  font-size: 0.8rem;
  color: RGB(102, 102, 102);
  margin-bottom: 3rem;
  white-space: pre-line;
  text-indent: 1em;
}
.hotSonger {
  padding: 0 10px;
}
.hotSongerImg img {
  width: 100%;
  height: 100%;
}
.hotSongerName {
  font-size: 0.9rem;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  margin-bottom: 1rem;
  text-align: center;
}
.hotSongerName:hover {
  color: RGB(64, 158, 255);
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.row-bg {
  background-color: #f9fafc;
}
.whtie {
  background: RGB(255, 255, 255);
}
.grey {
  background: RGB(250, 250, 250);
}
.el-pagination {
  margin: 0 0 2% 25%;
}
</style>